<template>
  <div class="outsides">
    <audio :src="musicUrl" ref="audio" @ended="musicEnd" ></audio>
    <span class="ptime" v-show="!isempty">{{ptime}}</span>
    <el-slider v-model="value" :show-tooltip="false" @change="valueChange"></el-slider>
    <span class="dtime" v-show="!isempty">{{dtime}}</span>
    <!-- <div @click="play">asd</div> -->
    <div class="aplayers-music" :class="{emptycolor:isempty}">
      <span @click="changeCurrentType">
        <i title="单曲循环" class="iconfont icon-danquxunhuan_ changecolor" style="font-size:14px" v-show="playType[0]"></i>
        <i title="随机播放" class="iconfont icon-suijibofang changecolor" style="font-size:20px;margin-right:11px;position:relative;right:3px" v-show="playType[1]"></i>
        <i title="顺序播放" class="iconfont icon-biao- changecolor" style="font-size:14px" v-show="playType[2]"></i>
        <i title="列表循环" class="iconfont icon-danquxunhuan changecolor" style="font-size:14px" v-show="playType[3]"></i>
      </span>  
      <i class="iconfont icon-xiayishou-left changecolor" style="font-size:7px" @click="prev"></i>
      <i class="iconfont icon-bofang" @click="play" v-if="!isplay"></i>
      <i class="iconfont icon-pause" @click="noplay" v-else></i>
      <i class="iconfont icon-xiayishou changecolor" style="font-size:7px" @click="next"></i>
      <i class="iconfont icon-ci changecolor" style="font-size:7px"></i>
    </div>
    <div class="cover cover-left" v-show="isempty"></div>
    <div class="cover cover-center" v-show="isempty"></div>
    <div class="cover cover-right" v-show="isempty"></div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      value:0,
      isplay:false,
      timer:0,
      durations:0,
      isempty:false,
      playType:[true,false,false,false],
      currentPlayType:1,
      isloop:'',
      isFirstPlay:0
    }
  },
  computed:{
    getcurrentType(){
      return JSON.parse(localStorage.getItem('currentType'))
    },
    currentMusicIndexs(){
      return this.$store.state.currentMusicIndex
    },
    ptime(){
      var time = parseInt(this.durations * this.value)
      var min = this.addZero(parseInt(time/60))
      var sec = this.addZero(parseInt(time - 60*min))
      return min + ':' + sec
    },
    dtime(){
      var time = parseInt(this.durations * 100)
      var min = this.addZero(parseInt(time/60))
      var sec = this.addZero(parseInt(time - 60*min))
      return min + ':' + sec
    },
    musicUrl(){
      return this.music
    },
    playList(){
      return this.$store.state.playlist
    },
  },
  props:{
    music:{
      type:String,
      default:''
    }
  },
  methods:{
    play(){
      if(this.isplay === false){
        this.$refs.audio.play()
        this.isplay = true
        for(var i=1;i<=this.timer;i++){
          clearInterval(i);
        }
        this.timer = setInterval(()=>{
          if(this.value === 100){
            clearInterval(this.timer)
            this.isplay = false
          }
          this.value += 1/this.durations
        },1000)
        return
      }
    },
    noplay(){
      if(this.isplay === true){
        for(var i=1;i<=this.timer;i++){
          clearInterval(i);
        }
        this.$refs.audio.pause()
        this.isplay = false
        return
      }
    },
    valueChange(num){
      this.value = num
      this.$refs.audio.currentTime = this.durations * num
      this.$store.commit('changeCurrentMusicProgress',this.durations * num)
    },
    prev(){this.$store.commit('changeCurrentMusicIndex','1')},
    next(){this.$store.commit('changeCurrentMusicIndex','0')},
    musicEnd(){
      switch(this.currentPlayType){
        case 0:
          this.value = 0
          this.isplay = false
          this.play()
          break;
        case 1:
          var num = Math.floor(Math.random()*this.playList.length)
          this.$store.commit('changeCurrentMusicIndex',parseInt(num));
          break;
        case 2:
          if(this.currentMusicIndexs !== this.playList.length-1){
            this.$store.commit('changeCurrentMusicIndex','0')
          }else{
            this.value = 0
            this.isplay = false
            for(var i=1;i<=this.timer;i++){
              clearInterval(i);
            }
          }
          break;
        case 3:
          this.$store.commit('changeCurrentMusicIndex','0');
          break;
      }
      // this.$store.commit('changeCurrentMusicIndex','0')
    },
    addZero(num){
      if(num<10)
        return "0" + num;
      return num;
    },
    changeCurrentType(){
      this.playType = [false,false,false,false]
      let title = ['单曲循环','随机播放','顺序播放','列表循环']
      this.currentPlayType++
      if(this.currentPlayType > 3) this.currentPlayType = 0
      this.playType[this.currentPlayType] = true
      this.$toast.show(title[this.currentPlayType],2000)
      localStorage.setItem('currentType', JSON.stringify(this.playType))
    }
  },
  created(){
    if(localStorage.getItem('currentType') !== null){
      let arr = JSON.parse(localStorage.getItem('currentType'))
      this.playType = arr
      this.currentPlayType = arr.findIndex(value => value === true)
    }
    if(!localStorage.getItem('playlist')){
      this.isempty = true
    }
  },
  updated(){
    if(this.playLists !== []){
      if(this.isFirstPlay < 2){
        this.isFirstPlay++
        // console.log('ass')
        // this.isempty = false
        // this.isplay = true
        // this.$refs.audio.pause()
        // oncanplay = ()=> {
        this.noplay()
      } 
      // this.isplay = true
        // console.log('ooo')
      // 
    }
  },
  watch:{
    musicUrl:{
      handler(){
        if(this.music === null){
          console.log('666')
          this.value = 0
          this.durations = 0
          this.$refs.audio.currentTime = 0
          this.$refs.audio.pause()
          this.isplay = false
          for(var i=1;i<=this.timer;i++){
            clearInterval(i);
          }
          this.$store.commit('changeCurrentMusicIndex',0)
          return
        }else{
          setTimeout(() => {
            this.isplay = false
            let time =  this.$store.state.currentMUsicDuration
            this.durations =  time / 100
            if(this.music !== ''){
              this.play()
            }
          }, 200);
        }
      },
      immediate:true,
    },
    currentMusicIndexs(){
      this.value = 0
    },
    playList:{
      handler(){
        this.value = 0
        if(this.playList.length == 0){
          for(var i=1;i<=this.timer;i++){
            clearInterval(i);
          }
          this.isplay = false
          this.isempty = true
        }else{
          this.isempty = false
        }
      },
    },
    isplay(){
      this.$store.commit('changePlayState',this.isplay)
    }
  }
}
</script>

<style scoped>
.outsides{
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-slider{
  width:73%;
}
.aplayers-music{
  /* box-sizing: content-box; */
  /* margin:0 50px !important; */
  display: flex;
  justify-content: center;
  /* margin: 0 auto; */
  align-items: center;
  position: absolute;
  top: -28px;
  width: 100%;
  height: 40px;
  /* background-color: #fff; */
}
.aplayers-music i{
  cursor: pointer;
  margin: 0 17px;
}
.aplayers-music :nth-child(3){
  background-color: rgb(244,244,244);
  border-radius: 50%;
  text-align: center;
  /* margin-left: 5px; */
  line-height: 35px;
  font-size: 20px;
  width: 35px;
  height: 35px;
  /* background-color: red; */
}
.aplayers-music .icon-bofang::before{
  position: relative;
  right: -2px;
}
.changecolor:hover{
  color: rgb(239,103,103);
}
.audio{
  width: 100%;
  position:absolute;
  bottom: -1px;
  /* flex-wrap: wrap-reverse; */
}
.ptime{
  position: relative;
  left: -10px;
  color: rgb(201,201,201);
  font:5px "Arial,Verdana,Sans-serif" !important;
  /* font-size: 5px !important; */
  font-weight: 100;
  /* color: #000; */
}
.dtime{
  position: relative;
  left: 15px;
  color: rgb(201,201,201);
  /* font-size: 5px; */
  font-weight: lighter;
  font:5px "Arial,Verdana,Sans-serif" !important;
}
.cover{
  position: absolute;
  background-color: rgb(255, 255, 255);
  height: 100px;
  width: 500px;
  opacity: .1;
  z-index: 100
}
.cover-left{
  position: absolute;
  left: -550px;
  background-color:#fff;
  opacity:1;
}
.cover-right{
  position: absolute;
  right: -550px;
  background-color:#fff;
  opacity:1;

}
.emptycolor{
  color:rgb(174,174,174)
}
</style>